import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

const theme = {
  colors: {
    primary: {
      500: '#212121',
    },
    active: {
      500: '#EF3800',
    },
    gray: {
      900: '#1d2129',
      800: '#272e3b',
      700: '#4e5969',
      600: '#6b7785',
      500: '#86909c',
      400: '#a9aeb8',
      300: '#c9cdd4',
      200: '#e5e6eb',
      100: '#f2f3f5',
      50: '#f7f8fa',
    },
    red: {
      900: '#4d000a',
      800: '#770813',
      700: '#a1151e',
      600: '#cb272d',
      500: '#f53f3f',
      400: '#f76560',
      300: '#f98981',
      200: '#fbaca3',
      100: '#fdcdc5',
      50: '#ffece8',
    },
    green: {
      900: '#004d0d',
      800: '#0b6517',
      700: '#1b7e25',
      600: '#319638',
      500: '#4caf50',
      400: '#65bf65',
      300: '#84cf81',
      200: '#a5dfa0',
      100: '#c7efc3',
      50: '#ebffe8',
    },
    gold: {
      900: '#4d2900',
      800: '#754200',
      700: '#9d5e00',
      600: '#c57d00',
      500: '#ed9e00',
      400: '#f1b62c',
      300: '#f4cb59',
      200: '#f8de87',
      100: '#fbeeb7',
      50: '#fffbe8',
    },
    blue: {
      900: '#001a4d',
      800: '#063078',
      700: '#114ba3',
      600: '#206ccf',
      500: '#3491fa',
      400: '#57a9fb',
      300: '#7bc0fc',
      200: '#9fd4fd',
      100: '#c3e7fe',
      50: '#e8f7ff',
    },
    blueAcme: {
      900: '#000d4d',
      800: '#031a79',
      700: '#072ca6',
      600: '#0e42d2',
      500: '#165dff',
      400: '#4080ff',
      300: '#6aa1ff',
      200: '#94bfff',
      100: '#bedaff',
      50: '#e8f3ff',
    },
    yellow: {
      900: '#4d3800',
      800: '#785d03',
      700: '#a38408',
      600: '#cfaf0f',
      500: '#fadc19',
      400: '#fbe842',
      300: '#fcf26b',
      200: '#fdfa94',
      100: '#fefebe',
      50: '#feffe8',
    },
    cyan: {
      900: '#00424d',
      800: '#03616c',
      700: '#07828b',
      600: '#0da5aa',
      500: '#14c9c9',
      400: '#37d4cf',
      300: '#5edfd6',
      200: '#89e9e0',
      100: '#b7f4ec',
      50: '#e8fffb',
    },
    pink: {
      900: '#4d003c',
      800: '#74095a',
      700: '#9c1877',
      600: '#c42e95',
      500: '#ec4ab4',
      400: '#f068bc',
      300: '#f487c6',
      200: '#f7a6d3',
      100: '#fbc7e2',
      50: '#ffe8f3',
    },
    purple: {
      900: '#16004d',
      800: '#27066e',
      700: '#3c108f',
      600: '#551db0',
      500: '#722ed1',
      400: '#8d4eda',
      300: '#a871e3',
      200: '#c396ed',
      100: '#ddbef6',
      50: '#f5e8ff',
    },
    dark: {
      1: '#00000040',
      2: '#00000073',
      3: '#000000A6',
      4: '#000000FF',
      10: '#0000001a',
      15: '#00000026',
      30: '#0000004d',
      50: '#00000080',
      65: '#000000a6',
      75: '#000000BF',
      90: '#000000e6',
    },
    light: {
      1: '#FFFFFF59',
      2: '#FFFFFF8C',
      3: '#FFFFFFD9',
      4: '#FFFFFFFF',
      10: '#ffffff1a',
      30: '#ffffff4d',
      50: '#ffffff80',
      90: '#ffffffe6',
      100: '#ffffff',
    },
    line: {
      1: '#F2F3F5FF',
      2: '#E5E6EBFF',
      3: '#C9CDD4FF',
      4: '#86909CFF',
    },
    fill: {
      1: '#ffffff',
      2: '#f7f8fa',
      3: '#f2f3f5',
      4: '#e5e6eb',
      5: '#c9cdd4',
      6: '#4e5969',
      7: '#000000',
    },
  },
}

export default defineConfig({
  content: {
    pipeline: {
      exclude: ['node_modules', '.git', '.github', '.husky', '.vscode', 'build', 'dist', 'mock', 'public', './stats.html'],
    },
  },
  shortcuts: [
    ['cus-btn', 'cursor-pointer hover:opacity-90 active:opacity-80 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['cus-input', 'focus:shadow-xl outline-none'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['flex-col', 'flex flex-col'],
    ['app-container', 'w-360 mx-auto'],
    [/^b-g-(\w+)-(\d+)$/, ([, color, num]) => `border-1 border-${color}-${num}`],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  rules: [
  ],
  theme,
})
